<!-- 新增轮播图 -->
<template>
  <a-modal
    :title="itemData ? '编辑轮播图' : '新增轮播图'"
    width="1000px"
    :visible="visible"
    @ok="handleOk"
    @cancel="handleCancel"
    destroyOnClose
  >
    <a-form-model ref="ruleForm" :label-col="labelCol" :wrapper-col="wrapperCol">
      <a-form-model-item label="轮播图片">
        <div>
          <UploadImg
            v-model="form.imgUrl"
            warehouse
            cropper
            :width="terminalType === 1 ? 360 : 384"
            :height="terminalType === 1 ? 180 : 173"
            :fileSize="20"
            :cropperEnlarge="terminalType === 1 ? 2 : 5"
          >
            <template #tips
              ><span class="fz-12">{{ desc }}</span></template
            >
          </UploadImg>
        </div>
      </a-form-model-item>
      <a-form-model-item label="跳转路径">
        <SelectOps
          :terminalType="terminalType"
          :selectType="selectType"
          v-bind="itemData"
          @setSelectData="getSelectData"
        />
      </a-form-model-item>
      <a-form-model-item label="排序">
        <a-input v-model="form.sort" placeholder="请输入" :disabled="disabled" />
      </a-form-model-item>
    </a-form-model>
  </a-modal>
</template>

<script>
import SelectOps from '../selectOps'
import { addConfigBanner, getSysOptions, editConfigBanner } from '@/api/web/web'
import UploadImg from '@/components/UpFile/uploadImg'

export default {
  props: ['terminalType', 'selectType', 'desc'],
  components: {
    SelectOps,
    UploadImg
  },
  data() {
    return {
      labelCol: { span: 4 },
      wrapperCol: { span: 16 },
      visible: false,
      form: {
        imgUrl: undefined,
        typeOptionsId: undefined,
        typeOptionsName: undefined,
        optionsId: undefined,
        optionsName: undefined,
        sort: undefined
      },
      loading: false,
      sysOptions: [],
      itemData: null
    }
  },
  computed: {},
  watch: {},
  methods: {
    handleCancel() {
      this.visible = false
      this.itemData = null
      this.form = {
        imgUrl: undefined,
        typeOptionsId: undefined,
        typeOptionsName: undefined,
        optionsId: undefined,
        optionsName: undefined,
        sort: undefined
      }
    },
    show(item) {
      if (item) {
        this.itemData = item
        Object.keys(this.form).forEach(k => {
          this.form[k] = item[k]
        })
      } else {
        Object.keys(this.form).forEach(k => {
          this.form[k] = undefined
        })
      }
      this.visible = true
    },
    async get_sys_options() {
      let res = await getSysOptions({ type: 0 })
      this.sysOptions = res.data || []
    },
    getSelectData(data) {
      Object.keys(data).forEach(k => {
        this.form[k] = data[k]
      })
    },
    handleChange() {},
    async handleOk() {
      let { code, msg } = this.itemData
        ? await editConfigBanner({ ...this.form, terminalType: this.terminalType, id: this.itemData.id })
        : await addConfigBanner({ ...this.form, terminalType: this.terminalType })
      this.$message[code === 0 ? 'success' : 'error'](msg)
      if (code === 0) {
        this.$emit('success')
        this.visible = false
      }
    }
  },
  created() {},
  mounted() {}
}
</script>
<style scoped></style>
